<template>
  <a-modal
    class="audit-auth-dialog"
    v-model:visible="dialogState.visiable"
    width="1000px"
    title="审核作者"
    cancelText="取消"
    okText="确认"
    @ok="emits('ok')"
    @cancel="emits('cancel')"
    :confirm-loading="loading"
  >
    <a-descriptions bordered title="基本信息" size="small" :column="4">
      <a-descriptions-item label="真实姓名">{{
        dialogState.authorDetail.realName || '暂无'
      }}</a-descriptions-item>
      <a-descriptions-item label="出生日期">{{
        dialogState.authorDetail.birthDate || '暂无'
      }}</a-descriptions-item>
      <a-descriptions-item label="是否独家">{{
        formatIsExclusive(dialogState.authorDetail.isExclusive)
      }}</a-descriptions-item>
      <a-descriptions-item label="证件类型">{{
        formatIdentityType(dialogState.authorDetail.identityType)
      }}</a-descriptions-item>
      <a-descriptions-item label="证件号码" :span="4">{{
        dialogState.authorDetail.identityNo || '暂无'
      }}</a-descriptions-item>
      <a-descriptions-item label="证件正面" :span="2">
        <a-image
          v-if="dialogState.authorDetail.frontImg"
          :width="200"
          :src="dialogState.authorDetail.frontImg"
        />
        <span v-else>暂无</span>
      </a-descriptions-item>
      <a-descriptions-item label="证件反面" :span="2">
        <a-image
          v-if="dialogState.authorDetail.backImg"
          :width="200"
          :src="dialogState.authorDetail.backImg"
        />
        <span v-else>暂无</span>
      </a-descriptions-item>
      <a-descriptions-item label="擅长类型" :span="4">
        <RenderNode :v-node="formatTag(favoriates, 'tag')" />
      </a-descriptions-item>
      <a-descriptions-item label="常住地" :span="4">{{
        dialogState.authorDetail.permanentAddress || '暂无'
      }}</a-descriptions-item>
      <a-descriptions-item label="其他信息" :span="4">
        <a-space>
          <a-button
            size="small"
            type="primary"
            @click="checkWorks(dialogState.authorDetail.sourceId)"
            :loading="checkAuthWorksLoading"
            >查看样品</a-button
          >
          <a-button size="small" type="primary" @click="gotoAuthorPage"
            >查看主页</a-button
          >
        </a-space>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      title="审核操作"
      bordered
      :column="1"
      style="margin-top: 18px"
    >
      <a-descriptions-item label="是否通过">
        <a-radio-group
          :disabled="dialogState.isDisable"
          v-model:value="dialogState.authorDetail.status"
        >
          <a-radio :value="AuditStatus.ACCESS">审核通过</a-radio>
          <a-radio :value="AuditStatus.UNACCESS">审核不通过</a-radio>
        </a-radio-group>
      </a-descriptions-item>
      <a-descriptions-item
        label="审核备注"
        v-if="dialogState.authorDetail.status === AuditStatus.UNACCESS"
      >
        <a-textarea
          :disabled="dialogState.isDisable"
          v-model:value="dialogState.authorDetail.memo"
          placeholder="请输入审核备注"
        />
      </a-descriptions-item>
    </a-descriptions>
    <a-collapse class="audit-auth-dialog__acollapse">
      <a-collapse-panel header="审核历史">
        <a-timeline
          style="margin-bottom: -50px; margin-top: 5px"
          v-if="
            dialogState.authorDetail.auditLogs &&
            dialogState.authorDetail.auditLogs.length > 0
          "
        >
          <a-timeline-item
            v-for="item in dialogState.authorDetail.auditLogs"
            :color="auditHistoryColor(item.result)"
            :key="item.id"
          >
            <template #dot v-if="item.result === AuditResult.WAIT">
              <ClockCircleOutlined style="font-size: 16px" />
            </template>
            {{
              `${item.auditTime}，${item.auditUser}将状态改为${auditHistoryText(
                item.result
              )}，备注为：${item.memo}`
            }}
          </a-timeline-item>
        </a-timeline>
        <span v-else>暂无</span>
      </a-collapse-panel>
    </a-collapse>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import useFormat from '@/hooks/serviceLogic/useFormat'

import { RenderNode } from '@/components/Util'

import {
  AuditStatus,
  ExclusiveStatus,
  IdentityType,
  AuditResult,
} from '@/api/audit/auth/model/authorModel'
import type { AuditDialogState } from '../types'

const props = withDefaults(
  defineProps<{
    dialogState: AuditDialogState
    loading?: boolean
    checkAuthWorksLoading?: boolean
  }>(),
  {
    loading: false,
    checkAuthWorksLoading: false,
  }
)

const emits = defineEmits<{
  (e: 'ok'): void
  (e: 'cancel'): void
  (e: 'checkAuthWorks', id: string): void
}>()

const { formatTag } = useFormat()
const favoriates = computed(() => {
  const { favoriates: favor } = props.dialogState.authorDetail
  if (favor) {
    return favor.split(',')
  }
  return []
})
const auditHistoryColor = (result: AuditResult) => {
  const colorMap = {
    [AuditResult.WAIT]: 'blue',
    [AuditResult.ACCESS]: 'green',
    [AuditResult.UNACCESS]: 'red',
    [AuditResult.UNCONTRACT]: 'gray',
    [AuditResult.AGAIN_UNCONTRACT]: 'green',
  }
  return colorMap[result]
}
const auditHistoryText = (result: AuditResult) => {
  const textMap = {
    [AuditResult.WAIT]: '待审',
    [AuditResult.ACCESS]: '通过',
    [AuditResult.UNACCESS]: '不通过',
    [AuditResult.UNCONTRACT]: '解约',
    [AuditResult.AGAIN_UNCONTRACT]: '再签',
  }
  return textMap[result]
}

const gotoAuthorPage = () => {
  window.open(`//7mx.com/${props.dialogState.authorDetail.sourceId}`, '_blank')
}

const checkWorks = (authId= '0') => {
  emits('checkAuthWorks', authId)
}

const formatIdentityType = (source: IdentityType) => {
  if (!source) {
    return '-'
  }
  const sourceMap: { [value in IdentityType]: string } = {
    [IdentityType.IDENTITY_CARD]: '身份证',
    [IdentityType.DRIVING_LICENCE]: '驾驶证',
  }
  return sourceMap[source]
}

const formatIsExclusive = (source: ExclusiveStatus) => {
  if (!source) {
    return '-'
  }
  const sourceMap: { [value in ExclusiveStatus]: string } = {
    [ExclusiveStatus.NORMAL]: '否',
    [ExclusiveStatus.EXCLUSIVE]: '是',
  }
  return sourceMap[source]
}
</script>

<style lang="scss">
@include b(audit-auth-dialog) {
  @include e(acollapse) {
    margin-top: 12px;
  }
}
</style>
